<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语单词</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.word-list {
    margin-top: 10px;
}

.word-item {
    margin-bottom: 15px;
}

input[type="text"] {
    width: 70%;
    padding: 8px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    display: inline-block;
}

.check-btn {
    padding: 8px 15px;
    margin-left: 10px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.check-btn:hover {
    background-color: #1976D2;
}

.feedback {
    display: block;
    margin-top: 10px;
    font-size: 14px;
}
.word-list {
    max-height: 800px;   /* 设置最大高度，根据你的需求调整 */
    overflow-y: auto;    /* 启用垂直滚动条 */
    margin-top: 10px;
}
    </style>
</head>
<body>
    <div class="container">
        <h1>英语单词</h1>

        <div style="text-align: right;padding-bottom: 20px;">
            <em id="writter">powered by SAKANA</em>
        </div>
        
        <!-- 按钮控制 -->
        <div class="buttons">
            <button id="toggleEnglish">隐藏英文</button>
            <button id="toggleChinese">隐藏中文</button>
        </div>

        <!-- 单词列表 -->
        <div id="wordList" class="word-list"></div>
    </div>

    <script >
        // 单词数据直接作为 JavaScript 对象声明
const words = [
    { "english": "Medical Informatics", "chinese": "医学信息学" },
    { "english": "wearable medical devices", "chinese": "可穿戴医疗设备" },
    { "english": "machine learning", "chinese": "机器学习" },
    { "english": "natural language processing", "chinese": "自然语言处理" },
    { "english": "diagnosis", "chinese": "诊断(名词)" },
    { "english": "clinical trial", "chinese": "临床试验" },
    { "english": "pandemic", "chinese": "(疾病)大流行" },
    { "english": "outbreak", "chinese": "(疾病)爆发" },
    { "english": "decision tree", "chinese": "决策树" },
    { "english": "sensitivity", "chinese": "灵敏度" },
    { "english": "specificity", "chinese": "特异度" },
    { "english": "receiver operating characteristic (ROC) curve", "chinese": "受试者工作特征曲线 (ORC)" },
    { "english": "area under the ROC curve (auROC/AUROC)", "chinese": "曲线下面积 (auROC/AUROC)" },
    { "english": "rehabilitation robot", "chinese": "康复机器人" },
    { "english": "Powered exoskeleton", "chinese": "动力外骨骼" },
    { "english": "telemedicine", "chinese": "远程医疗" },
    { "english": "chronic illnesses", "chinese": "慢性疾病" },
    { "english": "genomics", "chinese": "基因组学" },
    { "english": "cardiology", "chinese": "心脏病学" },
    { "english": "coronavirus", "chinese": "冠状病毒" },
    { "english": "computer tomography", "chinese": "计算机断层扫描" },
    { "english": "clinical symptom", "chinese": "临床症状" },
    { "english": "laboratory test", "chinese": "实验室检查" },
    { "english": "gradient boosting", "chinese": "梯度提升" },
    { "english": "true positive rate", "chinese": "真阳性率" },
    { "english": "false-positive rate", "chinese": "假阳性率" },
    { "english": "false-negative rate", "chinese": "假阴性率" },
    { "english": "positive predictive value (PPV)", "chinese": "阳性预测值 (PPV)" },
    { "english": "precision", "chinese": "精确率" },
    { "english": "recall", "chinese": "召回率" },
    { "english": "accuracy", "chinese": "准确率" },
    { "english": "semi-supervised learning", "chinese": "半监督学习" },
    { "english": "reinforcement learning", "chinese": "强化学习" },
    { "english": "data preprocessing", "chinese": "数据预处理" },
    { "english": "feature selection", "chinese": "特征选择" },
    { "english": "dimensionality reduction", "chinese": "降维" },
    { "english": "principal component analysis (PCA)", "chinese": "主成分分析" },
    { "english": "variance", "chinese": "(统计)方差" },
    { "english": "computer science", "chinese": "计算机科学" },
    { "english": "electronic health record (EHR)", "chinese": "电子健康档案" },
    { "english": "prevalence", "chinese": "患病率" },
    { "english": "regression", "chinese": "(机器学习)回归" },
    { "english": "clustering", "chinese": "(机器学习)聚类" },
    { "english": "supervised learning", "chinese": "有监督学习" },
    { "english": "unsupervised learning", "chinese": "无监督学习" },
    { "english": "overfitting", "chinese": "过拟合, 过度拟合" },
    { "english": "underfitting", "chinese": "欠拟合" },
    { "english": "random forest (RF)", "chinese": "随机森林" },
    { "english": "gradient boosting machine (GBM)", "chinese": "梯度提升机" },
    { "english": "support vector machine (SVM)", "chinese": "支持向量机" },
    { "english": "k-nearest neighbours (k-NN)", "chinese": "k近邻" },
    { "english": "logistic regression", "chinese": "逻辑回归" },
    { "english": "hierarchical clustering", "chinese": "层次聚类" },
    { "english": "k-means clustering", "chinese": "K-均值聚类" },
    { "english": "ensemble learning", "chinese": "集成学习" },
    { "english": "regularization algorithm", "chinese": "正则化算法" },
    { "english": "training dataset", "chinese": "训练集" },
    { "english": "validation dataset", "chinese": "验证集" },
    { "english": "test dataset", "chinese": "测试集" },
    { "english": "hypothesis generation", "chinese": "生成假设" },
    { "english": "high-dimensional data", "chinese": "高维数据" },
    { "english": "transcriptomics", "chinese": "转录组学" },
    { "english": "disease burden", "chinese": "疾病负担" },
    { "english": "omics", "chinese": "组学" },
    { "english": "drug response", "chinese": "药物反应" },
    { "english": "artificial neural network", "chinese": "人工神经网络" },
    { "english": "cross-validation", "chinese": "交叉验证" },
    { "english": "multilayer perceptron (MLP)", "chinese": "多层感知器" },
    { "english": "convolutional neural network (CNN)", "chinese": "卷积神经网络" },
    { "english": "named-entity recognition", "chinese": "命名实体识别" },
    { "english": "recurrent neural network", "chinese": "循环神经网络" },
    { "english": "long short term memory networks", "chinese": "长短期记忆网络" },
    { "english": "receptive field", "chinese": "感受野" },
    { "english": "activation function", "chinese": "激活函数" },
    { "english": "bias", "chinese": "偏差/误差" },
    { "english": "computer vision", "chinese": "计算机视觉" },
    { "english": "named-entity recognition", "chinese": "命名实体识别" },
    { "english": "recurrent neural network", "chinese": "循环神经网络" },
    { "english": "long short term memory networks", "chinese": "长短期记忆网络" },
    { "english": "neuron", "chinese": "神经元" },
    { "english": "weight", "chinese": "权重" },
    { "english": "chemical composition", "chinese": "化学组成(成分)" },
    { "english": "pixel", "chinese": "(显示器或电视机图象的)像素" },
    { "english": "array", "chinese": "数组" },
    { "english": "permute", "chinese": "改变次序,重新排列" },
    { "english": "microscopy image", "chinese": "显微镜图像" },
    { "english": "convolutional layer", "chinese": "卷积层" },
    { "english": "pooling layer", "chinese": "池化层" },
    { "english": "fully connected layer", "chinese": "全连接层" },
    { "english": "parameter", "chinese": "n.[机器学习]参数" },
    { "english": "backpropagation", "chinese": "反向传播" },
    { "english": "image classification", "chinese": "图像分类" },
    { "english": "object detection", "chinese": "目标检测" },
    { "english": "dermatology", "chinese": "皮肤病学" },
    { "english": "radiology", "chinese": "放射学" },
    { "english": "ophthalmology", "chinese": "眼科学" },
    { "english": "pathology", "chinese": "病理学" },
    { "english": "magnetic resonance imaging", "chinese": "核磁共振成像" },
    { "english": "probability distribution", "chinese": "概率分布" },
    { "english": "molecular phenotypes", "chinese": "分子表型" },
    { "english": "named entity recognizer", "chinese": "命名实体识别器" },
    { "english": "database", "chinese": "数据库" },
    { "english": "minimum", "chinese": "最小值,最小化" },
    { "english": "non-linear", "chinese": "非线性的" },
    { "english": "treatment", "chinese": "处理,治疗" },
    { "english": "classifier", "chinese": "分类者,分类器" },
    { "english": "flowchart", "chinese": "流程图,程序框图" },
    { "english": "tabular database", "chinese": "表格数据库" },
    { "english": "distributed database", "chinese": "分布式数据库" },
    { "english": "SQL (structured query language)", "chinese": "结构化查询语言" },
    { "english": "DBMS (Database Management System)", "chinese": "数据库管理系统" },
    { "english": "RDBMS (Relational Database Management System)", "chinese": "关系型数据库管理系统" },
    { "english": "ODBMS (object-oriented database management system)", "chinese": "面向对象的数据库管理系统" },
    { "english": "DDBMS (distributed database management system)", "chinese": "分布式数据库管理系统" },
    { "english": "segmentation algorithm", "chinese": "分割算法" },
    { "english": "disease monitoring", "chinese": "疾病监测" },
    { "english": "speech recognition", "chinese": "语音识别" },
    { "english": "syntactic analysis", "chinese": "句法分析" },
    { "english": "semantic analysis", "chinese": "语义分析" },
    { "english": "pragmatic analysis", "chinese": "语用分析" }
];

// 获取相关元素
const toggleEnglishButton = document.getElementById('toggleEnglish');
const toggleChineseButton = document.getElementById('toggleChinese');
const wordList = document.getElementById('wordList');

// 英文和中文的显示状态
let isEnglishHidden = false;
let isChineseHidden = false;

// 动态加载单词列表
words.forEach(word => {
    const wordItem = document.createElement('div');
    wordItem.classList.add('word-item');
    wordItem.innerHTML = `
        <span class="english">${word.english}</span> - <span class="chinese">${word.chinese}</span>
        <input type="text" class="input-box" placeholder="默写单词">
        <span class="feedback"></span>
    `;
    wordList.appendChild(wordItem);

    // 获取当前单词的输入框和反馈元素
    const inputBox = wordItem.querySelector('.input-box');
    const feedbackSpan = wordItem.querySelector('.feedback');

    // 监听输入框的输入事件
    inputBox.addEventListener('input', () => {
        const userAnswer = inputBox.value.trim();

        // 判断用户输入的答案
        if (userAnswer.toLowerCase() === word.english.toLowerCase()) {
            feedbackSpan.textContent = '正确！';
            feedbackSpan.style.color = 'green';
        } else {
            feedbackSpan.textContent = `错误！`;
            feedbackSpan.style.color = 'red';
        }
    });
});

// 隐藏或显示英文单词
toggleEnglishButton.addEventListener('click', () => {
    isEnglishHidden = !isEnglishHidden;
    const englishSpans = document.querySelectorAll('.english');
    englishSpans.forEach(span => {
        span.style.display = isEnglishHidden ? 'none' : 'inline';
    });
    toggleEnglishButton.textContent = isEnglishHidden ? '显示英文' : '隐藏英文';
});

// 隐藏或显示中文翻译
toggleChineseButton.addEventListener('click', () => {
    isChineseHidden = !isChineseHidden;
    const chineseSpans = document.querySelectorAll('.chinese');
    chineseSpans.forEach(span => {
        span.style.display = isChineseHidden ? 'none' : 'inline';
    });
    toggleChineseButton.textContent = isChineseHidden ? '显示中文' : '隐藏中文';
});

    </script>
</body>
</html>
